﻿@layout RootLayout
@inherits LayoutComponentBase

<Sidebar @ref="sidebar" @ref:suppressField>
    <SidebarContent>
        <SidebarBrand>
            <a href="">Blazorise Demo</a>
        </SidebarBrand>
        <SidebarNavigation>
            <SidebarLabel>Main</SidebarLabel>
            <SidebarItem>
                <SidebarLink To="" Title="Show dashboard">
                    <Icon Name="IconName.Dashboard" Margin="Margin.Is3.FromRight" />Dashboard
                </SidebarLink>
            </SidebarItem>
            <SidebarItem>
                <SidebarLink Toggled="(isOpen)=> sidebarSubItemTests.Toggle(isOpen)" IsShow="true">
                    <Icon Name="IconName.Edit" Margin="Margin.Is3.FromRight" />Test Pages
                </SidebarLink>
                <SidebarSubItem @ref="sidebarSubItemTests" @ref:suppressField IsShow="true">
                    <SidebarItem>
                        <SidebarLink To="tests/buttons">Buttons</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/forms">Forms</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/validations">Validations</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/collapse">Collapse</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/modals">Modals</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/tables">Tables</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/datagrid">DataGrid</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/cards">Cards</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/tabs">Tabs</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/progressbars">Progress bars</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/elements">Elements</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/components">Components</SidebarLink>
                    </SidebarItem>
                    <SidebarItem>
                        <SidebarLink To="tests/charts">Charts</SidebarLink>
                    </SidebarItem>
                </SidebarSubItem>
            </SidebarItem>
            <SidebarItem>
                <SidebarLink Toggled="(isOpen)=> sidebarSubItemApps.Toggle(isOpen)" IsShow="true">
                    <Icon Name="IconName.Smartphone" Margin="Margin.Is3.FromRight" />Apps
                </SidebarLink>
                <SidebarSubItem @ref="sidebarSubItemApps" @ref:suppressField IsShow="true">
                    <SidebarItem>
                        <SidebarLink To="apps/todo">Todo List</SidebarLink>
                    </SidebarItem>
                </SidebarSubItem>
            </SidebarItem>
        </SidebarNavigation>
    </SidebarContent>
</Sidebar>

<div class="app-main">
    <Bar Class="app-bar" Breakpoint="Breakpoint.Desktop" Background="Background.Primary" ThemeContrast="ThemeContrast.Light">
        <BarBrand>
            <BarItem>
                <BarLink To="">
                    <Icon Name="IconName.Dashboard" />
                    Blazorise Demo
                </BarLink>                
            </BarItem>
        </BarBrand>
        <BarToggler Clicked="@ToggleSidebar">
        </BarToggler>
        <BarMenu>
            <BarStart>
                <BarItem>
                    <BarLink To="https://blazorise.com/">Home</BarLink>
                </BarItem>
                <BarItem>
                    <BarLink To="https://blazorise.com/docs/">Documentation</BarLink>
                </BarItem>
                <BarItem>
                    <BarDropdown>
                        <BarDropdownToggle>More</BarDropdownToggle>
                        <BarDropdownMenu>
                            <BarDropdownItem To="https://blazorise.com/docs/quick-start/">
                                Quick-Start Guide
                            </BarDropdownItem>
                            <BarDropdownItem To="https://blazorise.com/docs/usage/">
                                Usage
                            </BarDropdownItem>
                        </BarDropdownMenu>
                    </BarDropdown>
                </BarItem>
            </BarStart>
            <BarEnd>
                <BarItem>
                    <BarDropdown>
                        <BarDropdownToggle><Icon Name="IconName.Tint" /> Theme</BarDropdownToggle>
                        <BarDropdownMenu Style="padding: 15px; min-width:550px;" IsRightAligned="true">
                            <Row>
                                <Column Margin="Margin.Is2.FromBottom">
                                    <Field>
                                        <CheckEdit Checked="@Theme.IsGradient" CheckedChanged="@OnGradientChanged">Gradient colors</CheckEdit>
                                    </Field>
                                    <Field>
                                        <CheckEdit Checked="@Theme.IsRounded" CheckedChanged="@OnRoundedChanged">Rounded elements</CheckEdit>
                                    </Field>
                                </Column>
                            </Row>
                            <Row>
                                <Container IsFluid="true">
                                    <ThemeColorSelector Value="@Theme.ColorOptions.Primary" ValueChanged="@OnThemeColorChanged"></ThemeColorSelector>
                                </Container>
                            </Row>
                        </BarDropdownMenu>
                    </BarDropdown>
                </BarItem>
                <BarItem>
                    <BarLink To="https://github.com/stsrki/blazorise">GitHub</BarLink>
                </BarItem>
            </BarEnd>
        </BarMenu>
    </Bar>
    <div class="app-content">
        @Body
    </div>
</div>

@code{
    void OnGradientChanged( bool value )
    {
        Theme.IsGradient = value;

        Theme.ThemeHasChanged();
    }

    void OnRoundedChanged( bool value )
    {
        Theme.IsRounded = value;

        //var borderRadius = value ? "0rem" : ".25rem";

        //if ( Theme?.ButtonOptions != null )
        //{
        //    Theme.ButtonOptions.BorderRadius = borderRadius;
        //    Theme.ButtonOptions.SmallBorderRadius = value ? "0rem" : ".2rem";
        //    Theme.ButtonOptions.SmallBorderRadius = value ? "0rem" : ".3rem";
        //}

        //if ( Theme?.DropdownOptions != null )
        //    Theme.DropdownOptions.BorderRadius = borderRadius;

        //if ( Theme?.InputOptions != null )
        //    Theme.InputOptions.BorderRadius = borderRadius;

        //if ( Theme?.CardOptions != null )
        //    Theme.CardOptions.BorderRadius = borderRadius;

        //if ( Theme?.ModalOptions != null )
        //    Theme.ModalOptions.BorderRadius = borderRadius;

        //if ( Theme?.TabsOptions != null )
        //    Theme.TabsOptions.BorderRadius = borderRadius;

        //if ( Theme?.ProgressOptions != null )
        //    Theme.ProgressOptions.BorderRadius = borderRadius;

        //if ( Theme?.AlertOptions != null )
        //    Theme.AlertOptions.BorderRadius = borderRadius;

        //if ( Theme?.BreadcrumbOptions != null )
        //    Theme.BreadcrumbOptions.BorderRadius = borderRadius;

        //if ( Theme?.BadgeOptions != null )
        //    Theme.BadgeOptions.BorderRadius = borderRadius;

        //if ( Theme?.PaginationOptions != null )
        //    Theme.PaginationOptions.BorderRadius = borderRadius;

        Theme.ThemeHasChanged();
    }

    void OnThemeColorChanged( string value )
    {
        if ( Theme?.ColorOptions != null )
            Theme.ColorOptions.Primary = value;

        if ( Theme?.BackgroundOptions != null )
            Theme.BackgroundOptions.Primary = value;

        Theme.ThemeHasChanged();
    }

    Sidebar sidebar;
    SidebarSubItem sidebarSubItemTests;
    SidebarSubItem sidebarSubItemApps;

    //bool collapseNavMenu = true;

    void ToggleSidebar()
    {
        sidebar.Toggle();
    }

    [CascadingParameter] Theme Theme { get; set; }
}